<template>
    <div class="f-nav-item" :class="{selected,vertical}" @click="onClick">
        <slot></slot>
    </div>
</template>

<script>
  export default {
    name: "FNavItem"
    ,inject:['root','vertical']
    ,props:{
      name:{
        type:String
        ,required:true
      }
    }
    ,data(){
      return {
        selected:false
      }
    }
    ,created() {
      // console.log(this.root)
      this.root.addItem(this);
    }
    ,methods:{
      onClick(){
        this.root.namePath = [];
        this.$parent.updateNamePath && this.$parent.updateNamePath();
        this.$emit('add:selected', this.name);
      }
    }

  }
</script>

<style lang="scss">
@import "../components/var";
.f-nav-item{
    padding:10px 20px;
    position:relative;
    &:not(.vertical){
        &.selected{
            &::after{
                content:'';
                position:absolute;
                bottom:0;
                left:0;
                border-bottom:1px solid $blue;
                width: 100%;
            }
        }
    }
    &.vertical{
        &.selected{
            color:$blue;
        }
    }

    a{
        color:inherit;
        text-decoration: none;
    }
}

.f-sub-nav .f-nav-item:not(.vertical){

    &.selected{
        background: $grey;
        color:$color;
        &::after{
            display:none;
        }
    }
}
</style>
